import moment, { min } from 'moment'
import React, { useEffect, useState } from 'react'
import { IRouteComponentProps, useSelector, useDispatch } from 'umi'
import { BackTop } from 'antd';
import { IknowledgeListItem } from '../../utils/interface'
import '../../static/font_article/iconfont.css'
import './Detail.less'
import theTime from '../../services/module/index'



const Detail: React.FC<IRouteComponentProps> = ({ history, location, match }) => {
    let detail = useSelector((state: { Detail: any }) => state.Detail)
    let dispatch = useDispatch()
    let id = location.query.id
    console.log(id);
    let detailCon = detail.detailList;
    console.log(detailCon);
    let detailReadList = [];
    if (typeof detailCon.toc == 'string') {
        detailReadList = JSON.parse(detailCon.toc)
    }
    const [likes, setLikes] = useState(false);
    const [text, setText] = useState(false);
    useEffect(() => {
        // 详情
        dispatch({
            type: 'Detail/getArticleDetail',
            payload: { id: id }
        });
        //详情右边
        dispatch({
            type: 'Detail/deatilread',
            payload: { id: id },
        });
    }, [])

    function changeFlag() {
        dispatch({
            type: 'Detail/changelikes',
            payload: { id: id, like: likes },
        });
        setLikes(!likes);
    }

    return (<div className='detail'>

        <div className="con">
            {/* <div className="ce">
                <div className='icon'>
                    <i
                        className={`iconfont icon-shoucang ${likes ? 'active' : ''}`}
                        onClick={() => changeFlag()}
                    >
                        <span>{detailCon.likes}</span>
                    </i>
                </div>
                <div className='icon'>
                    <i className="iconfont icon-chat"></i>
                </div>
                <div className="icon">
                    <i className="iconfont icon-icon_fenxiang"></i>
                </div>
            </div> */}
            <div className="left">
                <div className="article">
                    <img src={detailCon.cover} alt="" />
                    <div >
                        <div className="text">
                            <h1>{detailCon.title}</h1>
                            <p>
                                发布时间{moment(detailCon.createAt).format('YYYY-MM-DD h:mm:ss')}
                                ·阅读量{detailCon.views}
                            </p>
                        </div>
                        {/* <Editor value={detailCon.html} toolbar={toolbar} /> */}
                        <div dangerouslySetInnerHTML={{ __html: detailCon.html }}></div>
                        <p className="p2">
                            发布于{moment(detailCon.createAt).format('YYYY-MM-DD h:mm:ss')} |
                            版权信息：非商用-署名-自由转载
                        </p>
                    </div>
                </div>
                <div className="comment">
                    <h3>评论</h3>
                    <div className="con">
                        <textarea placeholder="请输入评论内容（支持 Markdown）" className="ant-input" ></textarea>
                    </div>
                    <div className='foot'>
                        <div className='expression'>
                            <i className="iconfont icon-biaoqing"></i>
                            <span>表情</span>
                        </div>
                        <div className="btn">
                            <button>发布</button>
                        </div>
                    </div>
                </div>
            </div>
            <div className="right">
               <div className="sticky">
               <div className="right_top">
                    <h2>推荐阅读</h2>
                    <ul>
                        {detail.detailReadList && detail.detailReadList.map((item: IknowledgeListItem) => {
                            return (
                                <li key={item.id}>
                                    <span>{item.title}</span> &emsp; <span>{theTime(item.createAt)}</span>
                                </li>
                            );
                        })
                        }
                    </ul>
                </div>
                <div className="right_bottom">
                    <h2>目录</h2>
                    {
                        detailReadList &&
                        detailReadList.map((item: any) => {
                            return (
                                <ul key={item.id}>
                                    {
                                        item.level == "2" ? <li>{item.id}</li> : <li style={{ marginLeft: "20px" }}>{item.id}</li>
                                    }
                                </ul>
                            );
                        })
                    }
                </div>
               </div>
            </div>
            <BackTop className="gotop">
                <div >
                    <i className="iconfont icon-huidaodingbu"></i>
                </div>
            </BackTop>
        </div>
    </div>)
}

export default Detail